<template>
  <div ref="chartRef" :style="{ height, width }"></div>
</template>
<script lang="ts">
import {defineComponent,onMounted, PropType, ref, Ref, reactive, watchEffect} from 'vue';
import {useECharts} from '/@/hooks/web/useECharts';
import {cloneDeep} from 'lodash-es';
export default defineComponent({
	name: 'bar',
	props: {
		chartData: {
			type: Array,
			default: () => [],
		},
		option: {
			type: Object,
			default: () => ({}),
		},
		width: {
			type: String as PropType<string>,
			default: '100%',
		},
		lineLed: {
			type: Object,
			default: {
				xLine: '#6d6d6d',
				label: '#666',
				lineColorBegin: '#a1dfd2',
				lineColorEnd: '#f3faf9',
				xUnit: '月度',
				yUnit: '车辆数',
			},
		},
		height: {
			type: String as PropType<string>,
			default: '280px',
		},
		// update-begin--author:liaozhiyang---date:20240407---for：【QQYUN-8762】首页默认及echars颜色调整
		seriesColor: {
			type: String,
			default: '#1890ff',
		},
		// update-end--author:liaozhiyang---date:20240407---for：【QQYUN-8762】首页默认及echars颜色调整
	},
	setup(props) {
		let xLabel = ['语文', '数学', '英语', '科学', '历史'];
		const chartRef = ref<HTMLDivElement | null>(null);
		const {setOptions,resize, echarts} = useECharts(chartRef as Ref<HTMLDivElement>);
			 onMounted(()=>{
          window.addEventListener('resize',function(){
            resize()
          })
        })

      let lineLed = props.lineLed

      console.log(lineLed,'lineLed')
		const option = reactive({
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					label: {
						show: true,
						backgroundColor: '#fff',
						color: '#556677',
						borderColor: 'rgba(0,0,0,0)',
						shadowColor: 'rgba(0,0,0,0)',
						shadowOffsetY: 0,
					},
					lineStyle: {
						width: 0,
					},
				},
				backgroundColor: '#fff',
				textStyle: {
					color: '#5c6c7c',
				},
				padding: [10, 10],
				extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)',
			},
			legend: {
				right: 10,
				top: 10,
			},

			grid: {
				top: 50,
				left: 20,
				right: 40,
				bottom: 40,
				containLabel: true,
			},
			xAxis: [
				{
					name: lineLed.xUnit,
					type: 'category',
					boundaryGap: false,
					axisLabel: {
						formatter: '{value}',
						textStyle: {
							color: lineLed.label,
						},
					},
					axisLine: {
						lineStyle: {
							color:lineLed.xLine// '#D9D9D9',
						},
					},
					axisTick: {
						show: false,
					},
					data: [],
				},
			],
			yAxis: [
				{
					type: 'value',
					name:  lineLed.yUnit,//'车辆数',
					axisLabel: {
						textStyle: {
							color:lineLed.label,// '#666',
						},
					},
					nameTextStyle: {
						color: '#666',
						fontSize: 12,
						lineHeight: 40,
					},
					splitLine: {
						show: false,
					},

					axisTick: {
						show: false,
					},
				},
			],
			series: [
				{
					type: 'line',
					smooth: true,
					// showSymbol: false,/
					symbolSize: 8,
					zlevel: 3,
					itemStyle: {
						color: '#24b496',
					},
					lineStyle: {
						normal: {
							color: '#24b496',
							// shadowBlur: 3,
							// shadowColor: '#24b496',
							// shadowOffsetY: 8
						},
					},
					areaStyle: {
						normal: {
							color: new echarts.graphic.LinearGradient(
								0,
								0,
								0,
								1,
								[
									{
										offset: 0,
										color:  lineLed.lineColorBegin ,
									},
									{
										offset: 1,
										color: lineLed.lineColorEnd,//'#f3faf9',
									},
								],
								false
							),
							// shadowColor: '#f3faf9',
							// shadowBlur: 10
						},
					},
					data: [],
				},
			],
		});

		watchEffect(() => {
			props.chartData && initCharts();
		});

		function initCharts() {
			if (props.option) {
				Object.assign(option, cloneDeep(props.option));
			}
			let seriesData = props.chartData.map((item) => {
				return item.value;
			});
			let xAxisData = props.chartData.map((item) => {
				return item.name;
			});
			option.series[0].data = seriesData;

			// update-begin--author:liaozhiyang---date:20240407---for：【QQYUN-8762】首页默认及echars颜色调整
			// option.series[0].color = props.seriesColor;
			// update-end--author:liaozhiyang---date:20240407---for：【QQYUN-8762】首页默认及echars颜色调整
			option.xAxis[0].data = xAxisData;
			setOptions(option);
		}

		return {chartRef};
	},
});
</script>
